<template>
  <div class="person">
    <h1>情况2:监视ref定义的对象数据类型</h1>
    <h2>姓名:{{person.name}}</h2>
    <H2>年龄:{{person.age}}</H2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改人信息</button>
  </div>
</template>

<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
/**
 * @author
 * 基本类型响应式数据必须用ref
 * 若需要永固一个响应式对象层级不深ref，reactive都可以
 * 若需要一个响应式对哦哦行,并且层级较深推荐实用reactive
 */
import {watch,ref,reactive,toRefs,toRef,computed} from "vue";

//响应式数据
let person=ref({
  name:'罗佳维',
  age:19
})
//方法
function changeName(){
  person.value.name+='!'
}
function changeAge(){
  person.value.age+=1
}

function changePerson(){
  person.value={name: '里斯',age: 200}
}

/**
 * 监视.监视ref定义的对象数据类型,监视的是对象的地址值,若想监视对象内部的属性的变化,需要手动去开启
 * watch第一个参数:被监视的数据
 * watch第2个参数:监视的回调
 * watch第3个参数:配置对象(deep,immediate等等)
 */
watch(person,(newValue,oldValue)=>{
  console.log('person变化了',newValue,oldValue)
},{deep:true,immediate:true}) //立即深度监视  //只用deep开启深度监视会造成里面属性值修改 旧值和新值不一样

// //监视类型1基本类型数据(对象,回调函数可箭头函数) ref对象不用写value 监视到10后控制台停止监视
// const stopWatch= watch(sum,(newValue,oldValue)=>{
//   console.log('sum发送变化',newValue,oldValue)
//   if (newValue>=10){
//     stopWatch()
//   }
// })


</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
li{
  font-size: 30px;
}
</style>